<template>
    <div>
        <!-- 导航条 -->
        <navigation></navigation>
        <el-table :data="tableData" style="width: 100%">         
            <el-table-column type="index" label="序号" width="100px">
            </el-table-column>
            <el-table-column prop="chapterNumber" label="章节">
            </el-table-column>
            <el-table-column prop="description" label="名称">
            </el-table-column>
            <el-table-column label="课件">
                <template slot-scope="scope"> 
                    <!-- TODO 这里需要将这个地址换 -->
                    <el-link :underline="false" type="primary" :href="`http://127.0.0.1:8000/teacher/ppt/getPPTById?id=${scope.row.id}`">{{scope.row.pptname}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope"> 
                    <!-- TODO 这里需要将这个地址换 -->
                    <el-link :underline="false" type="primary" :href="`http://127.0.0.1:8000/teacher/ppt/getPPTById?id=${scope.row.id}`">下载</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import navigation from '/src/views/navigation.vue'
    export default {
        components: {// 通过 components节点，为当前的组件注册私有子组件
            "navigation": navigation,
        },
        created () {
            this.getPPT(window.sessionStorage.getItem('classId'))  
        },
        data() {
            return {
                tableData:[],
            };
        },
        methods: {
            // 获取课件信息
            async getPPT(id) {
                const { data: res } = await this.$axios.get("/ppt/getPPTs",{
                    params:{
                        id:id
                    }
                })
                if(res.code!=200){
                    return this.$message.error("网络错误")
                }
                this.tableData = res.data
            },
        }
    }
</script>

<style lang="less" scoped>
    .el-table{
        margin:auto 50px;
    }
</style>